<template>
  <div class='container'>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">分类名称:</span>
      <el-input class='flex-1' v-model="name_value"></el-input>
    </div>
    <div class='app-row m-30-t'>
      <span class="title bold width-100 align-right">分类图片:</span>
      <el-upload :file-list="file_list" 
      action="https://jsonplaceholder.typicode.com/posts/">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
    <div class='app-row m-30-t'>
      <span class="title bold width-100 align-right">上级分类:</span>
      <el-cascader
        v-model="category_value"
        :options="category_options">
      </el-cascader>
    </div>
    <div class='annotation m-10-t m-114-l'>
      <span>如果不选择上级分类，默认为顶级分类</span>
    </div>
    <div class='app-row m-50-t'>
      <span class="title bold width-100 align-right">首页显示:</span>
      <el-radio v-model="show_radio" :label="0">否</el-radio>     
      <el-radio v-model="show_radio" :label="1">是</el-radio>    
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">排序:</span>
      <el-input class='flex-1' v-model="rank_value"></el-input>
    </div>
    <!-- <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">SEO标题:</span>
      <el-input class='flex-1'></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">SEO关键词:</span>
      <el-input class='flex-1'></el-input>
    </div> -->
    <!-- <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">SEO描述:</span>
      <el-input class='flex-1' type="textarea" :rows='2'></el-input>
    </div> -->
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="add_button">添加店铺类型</el-button>
    </div>
  </div>
</template>

<script>
  import shop_category_request from "@/api/shop_category_request"
  export default {
    name: 'shop_category_add',
    data() {
      return {
        name_value: "",
        type_value: "",
        file_list: [],
        show_radio: 1,
        rank_value: 0,
        category_options: [],
        category_value: 'dingjifenlei',
        action: '123'
      }
    },
    created() {
      this.get_shop_category()
    },
    mounted() {
  
    },
    methods: {
      check_necessary_value() {
        if (this.name_value == '') {
          this.$message.error("请输入店铺类型名称")
          return
        }
        if (this.rank_value === '') {
          this.$message.error("请设置排序")
          return
        }

        return true
      },
      add_button() {
        let if_necessary_value = this.check_necessary_value()
        if (!if_necessary_value) {
          return
        }
        let params = {
          name: this.name_value,
          parent_id : "0",
          visibility: this.show_radio,
          sort: this.rank_value,
          // img: '',
          _hash: 0,
        }
        shop_category_request.add_shop_category(params, res=> {
          this.$router.push('/shop/shop_category')

        })
      },
      get_shop_category() {
        shop_category_request.shop_category_list({pageSize: 100000}, res=>{
          let result = res.data
        })
      }
      // get_list() {
      //   this.listLoading = true,
      //   shop_category_request.shop_category_list({pageSize: this.current_size, page: this.current_page, keywords: this.keyword}, res=> {
      //     this.listLoading = false,
      //     this.shop_category_list = res.data
      //     this.get_total()
      //   })
      // },
    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>